<template>
  <div class="footer_box_b">
    <div class="footer">
      <div class="container sq_xl">
        <div class="s_flex s_justify_content_start s_justify_content_between">
          <div class="footer_img">
            <img src="../../assets/web/ft_logo.png" alt="" />
          </div>
          <div class="line"></div>
          <div
            class="
              footer_info
              s_flex s_justify_content_start s_justify_content_between
            "
          >
            <div>
              <h4>服务</h4>
              <ul>
                <li class="sq_content">
                  <router-link to="/web/policies">政策法规</router-link>
                </li>
                <li class="sq_content">
                  <router-link to="/web/guanjia">专利管家</router-link>
                </li>
                <li class="sq_content">
                  <router-link to="/web/overseas/assistance"
                    >海外援助</router-link
                  >
                </li>
                <li class="sq_content">
                  <router-link to="/web/enterprise">企业家+科学家</router-link>
                </li>
                <li class="sq_content">
                  <router-link to="/web/finance">知识产权金融</router-link>
                </li>
                <li class="sq_content">
                  <router-link to="/web/patentaward">对话顺德</router-link>
                </li>
              </ul>
            </div>
            <div>
              <h4>中心服务</h4>
              <ul>
                <li class="sq_content">
                  <router-link to="/web/services/introduce"
                    >中心介绍</router-link
                  >
                </li>
                <li class="sq_content">
                  <router-link to="/web/services/dynamic">顺德动态</router-link>
                </li>
                <li class="sq_content">
                  <router-link to="/web/services/central">活动中心</router-link>
                </li>
                <li class="sq_content">
                  <router-link to="/web/news">新闻资讯</router-link>
                </li>
              </ul>
            </div>
            <div>
              <h4>联系方式</h4>
              <ul>
                <li class="sq_content">
                  <i class="iconfont icon-xinxi"></i>
                  <span>sdipsc@163.com</span>
                </li>
                <li class="sq_content">
                  <i class="iconfont icon-dingwei"></i>
                  <span>佛山市顺德区大良街道南方智谷知识产权大厦8楼</span>
                </li>
                <li class="sq_content">
                  <i class="iconfont icon-dianhua2"></i>
                  <span>0757-22388580</span>
                </li>
              </ul>
            </div>
            <div>
              <h4>SIPPC公众号</h4>
              <div class="ewm_box">
                <img src="../../../public/ewm.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="contact sq_content ft_color">
          <div>
            <router-link to="/">
              <i class="iconfont icon-qq3"></i>&nbsp;&nbsp;QQ</router-link
            >&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
            <router-link to="/">
              <i class="iconfont icon-weixin1"></i>&nbsp;&nbsp;微信</router-link
            >&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
            <router-link to="/">
              <i class="iconfont icon-weibo1"></i>&nbsp;&nbsp;微博</router-link
            >
          </div>

          <div class="sq_content ft_color line_h_26">
            版权所有©2019-2020顺企知识产权保护服务中心 | 粤ICP备19034339号-1
          </div>
        </div>
      </div>
      <div class="container sq_xs">
        <el-collapse v-model="active" accordion>
          <el-collapse-item title="服务" name="1">
            <ul class="ft_ul">
              <li><router-link to="/web/policies">政策法规</router-link></li>
              <li><router-link to="/web/guanjia">数据平台</router-link></li>
              <li>
                <router-link to="/web/overseas/assistance"
                  >海外援助</router-link
                >
              </li>
              <li>
                <router-link to="/web/enterprise">企业家+科学家 </router-link>
              </li>
              <li><router-link to="/web/finance">知识产权金融</router-link></li>
              <li><router-link to="/web/patentaward">对话顺德</router-link></li>
            </ul>
          </el-collapse-item>
          <el-collapse-item title="中心服务" name="2">
            <ul class="ft_ul">
              <li>
                <router-link to="/web/services/introduce">中心介绍</router-link>
              </li>
              <li>
                <router-link to="/web/services/dynamic">顺德动态</router-link>
              </li>
              <li>
                <router-link to="/web/services/central">活动中心</router-link>
              </li>
              <li>
                <router-link to="/web/news">新闻资讯</router-link>
              </li>
            </ul>
          </el-collapse-item>
        </el-collapse>
        <div class="gy_user">
          <div class="gy_user_item">
            <img src="@/assets/web/logo1.png" alt="" />
          </div>
          <div class="gy_user_item">
            <div class="sq_content ft_color top">
              <i class="iconfont icon-xinxi"></i>
              <span>sdipsc@163.com</span>
            </div>
            <div class="sq_content ft_color top">
              <i class="iconfont icon-dingwei"></i>
              <span>佛山市顺德区大良街道南方智谷知识产权大厦8楼</span>
            </div>
            <div class="sq_content ft_color top">
              <i class="iconfont icon-dianhua2"></i>
              <span>0757-22388580</span>
            </div>
            <div
              class="
                contact
                sq_content
                ft_color
                s_flex s_justify_content_between s_align_items_center
              "
            >
              <router-link to="/">
                <i class="iconfont icon-qq3"></i>&nbsp;&nbsp;QQ</router-link
              >|
              <router-link to="/">
                <i class="iconfont icon-weixin1"></i
                >&nbsp;&nbsp;微信</router-link
              >|
              <router-link to="/">
                <i class="iconfont icon-weibo1"></i
                >&nbsp;&nbsp;微博</router-link
              >
            </div>
            <div class="sq_content ft_color line_h_26">
              版权所有©2019-2020顺企知识产权保护服务中心 <br />
              粤ICP备19034339号-1
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: ["1"],
    };
  },
};
</script>

<style lang="less" scoped>
.footer {
  background-color: var(--color7);
  padding: 50px 0;
  .footer_img {
    width: 230px;
    img {
      width: 100%;
    }
  }
  .footer_info {
    width: 70%;
    li {
      margin-top: 26px;
    }
  }
  .line {
    width: 1px;
    height: 129px;
    // border: 1px solid #2b3e51;
  }
  li,
  h4 {
    color: var(--color8);
  }
  .ewm_box {
    width: 86px;
    height: 86px;
    margin: 14px auto 0;
    img {
      width: 100%;
    }
  }
  .contact {
    display: flex;
    justify-content: space-between;
    // border-top: 1px solid #2b3e51;
    // border-bottom: 1px solid #2b3e51;
    padding: 15px 0;
    margin: 50px 0 20px;
    .iconfont {
      font-size: 20px;
    }
    a:hover {
      color: var(--color4);
    }
  }
}
.footer_info a:hover {
  color: var(--color4);
}
.footer_box_b {
  width: 100%;
}

@media (max-width: 750px) {
  .ft_ul {
    li {
      margin-bottom: 15px;
    }
  }
  .gy_user {
    //    .contact{
    //   border-bottom:1px solid #2b3e51;
    //   padding-bottom:10px;
    // }
    .gy_user_item {
      margin-top: 25px;
      img {
        height: 30px;
      }
    }
  }
  .footer_box_b {
  }
  .footer .contact {
    border-top: 1px solid #2b3e51;
    border-bottom: 1px solid #2b3e51;
    padding: 10px 0;
    margin: 25px 0 10px;
  }
  .footer {
    padding: 0 0;
    overflow: scroll;
  }
  .top {
    margin-bottom: 10px;
  }
}
</style>